<template>
	<view>
		<payQr :payUrl='payUrl' :show='show' @close='close' ></payQr>
		<u-loading-page loading-mode="semicircle" :loading="loading" color='#57E3A8' loading-text="请稍等" ></u-loading-page>
		<view v-if="!loading">
			<view v-show="showNething" style="width: 100%;height: 600rpx;display: flex;justify-content: center;align-items: center;font-weight: 700;">
				暂无数据
			</view>
			<view class="search" :style="{width:width+1+'px'}">
				<input type="text" placeholder="订单关键字" v-model="reqData.title" @input="searchKeyDo"/>
			</view>
			<view class="order_list" v-for="item,index in orderData" :key='index'>
				<view class="order_list_titel">
					订单号:&nbsp;{{item.order_no}}
				</view>
				<view class="order_list_status">
					订单状态: {{isStatus(item.status)}}  <text style="color: red;">&nbsp;总价{{sumPirce(item)}}</text>
				</view>
				<view class="order_list_child" v-for="secendItem,index in item.orderDetails.data">
					<view class="order_list_child_img">
						<image :src="secendItem.goods.cover_url" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="order_list_child_context">
						<view class="order_list_child_context_titel">
							{{secendItem.goods.title}}
						</view>
						<view class="order_list_child_context_gray">
							单价:&nbsp;￥{{secendItem.goods.price}} * {{secendItem.num}}
						</view>
						<view class="order_list_child_context_sumPirce">
							总价:&nbsp;￥{{secendItem.goods.price*secendItem.num}}
						</view>
					</view>
					
				</view>
				<button type="default" class="order_button" @click="goToPay(item.id)">去支付</button>
			</view>
		</view>
		<view class="loding_bottom" v-show="buttom_loading">
			加载中
		</view>
	</view>
</template>

<script>
	import payQr from '../../components/payQr/payQr.vue'
	import {mapActions} from 'vuex'
	export default {
		components: {
			payQr
		},
		data() {
			return {
				orderData:[],
				meta:{},
				loading:true,
				total:0,
				timer:0,
				reqData:{
					page:1,
					title:''
				},
				buttom_loading:false,
				width: uni.getSystemInfoSync().screenWidth,
				show:false,
				payUrl:''
			};
		},
		methods: {
			...mapActions('indexStore',['getSumbitOrder']),
			sumPirce({orderDetails:{data}}){
				return data.reduce((value,itme)=>{
					return value + itme.num * itme.goods.price
				},0)
			},
			async goToPay(id) {
				const result = await this.getSumbitOrder(id)
				if (result) {
					this.payUrl = result
					this.show = true
				}
			},
			isStatus(value) {
				switch(value){
					case 1:
					    return "新订单"
					case 2:
						return "支付完成"
					case 3:
						return "已发货"
					case 4:
						return "已确认收货"
					case 5:
						return "已过期"
					default:
						return "未知"
				}
			},
			searchKeyDo(){
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.orderData = []
					this.reqData.page = 1
					this.buttom_loading=true
					this.getOrderList()
					
				},500)
			},
			close(){
				this.show = false
			},
			async getOrderList(){
				const {data,meta:{pagination:{current_page,total}}} = await uni.$u.api.reqOrderList(this.reqData)
					this.orderData = this.orderData.concat(data) 
					this.reqData.page = current_page
					this.total = total
					this.loading = false
					this.buttom_loading = false
			}
		},
		onLoad() {
			this.getOrderList()
		},
		computed:{
			showNething(){
				return this.orderData.length == 0 && !this.buttom_loading
			}
		},
		onReachBottom(){
			if(this.orderData.length >= this.total){
				uni.showToast({
					title:'已经到底了',
					icon:'none'
				})
				return
			}
			this.buttom_loading = true
			this.reqData.page ++
			this.getOrderList()
		}
	}
</script>

<style lang="scss">
.search{
	height: 140rpx;
	background-color: #57E3A8;
	top: 89rpx;
	position: fixed;
	//#ifndef H5
	top: 0;
	//#endif
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	left: 0;
	&>input{
		width: 85%;
		height: 70%;
		border-radius: 60rpx;
		background-color: #F9F871;
		text-align: center;
		font-weight: 700;
	}
}
.loding_bottom{
	text-align: center;
	font-weight: 700;
	font-size: 36rpx;
}
.order_button{
	width: 90%;
	margin: 20rpx auto;
	border-radius: 30rpx;
	background-color: black;
	color: #57E3A8;
	font-size: 40rpx;
	font-weight: 700;
}
.order_list_status{
	padding-left: 35rpx;
	font-size: 50rpx;
	font-weight: 700;
	padding-right: 40rpx;
	display: flex;
	justify-content: space-between;
}
.order_list_child{
	width: 90%;
	height: 200rpx;
	border-radius: 30rpx;
	background-color: #F9F871;
	margin: 20rpx auto;
	display: flex;
	align-items: center;
	.order_list_child_img{
		width: 140rpx;
		height: 140rpx;
		margin-left: 40rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}
	.order_list_child_context{
		flex: 1;
		.order_list_child_context_titel{
			font-weight: 700;
			padding-left: 50rpx;
		}
		.order_list_child_context_gray{
			text-align: right;
			font-size: 20rpx;
			padding-right: 40rpx;
			margin-top: 20rpx;
			color: #333333;
		}
		.order_list_child_context_sumPirce{
			text-align: right;
			color: red;
			padding-right: 40rpx;
			font-weight: 700;
		}
	}
}
.order_list_titel{
	padding:  20rpx 0 0;
	padding-left: 40rpx;
	font-size: 30rpx;
	font-weight: 700;
}
page{
	padding-top: 160rpx;;
	background-color: #F9F871 !important;
	padding-bottom: 80rpx;
}
.order_list{
	width: 95%;
	padding: 0 0 30rpx;
	background-color: #57E3A8;
	margin: 15rpx auto;
	border-radius: 30rpx;
	
}
</style>
